<template>
  <div class="container">
    <div class="popup">
      <div class="pop">
        <div class="popup-lf">
          <div
            class="li large"
            v-for="(item, index) in gameTemplateData"
            :class="currentGameType === index ? 'actives' : ''"
            @click="setCurrentGameType(index)"
            :key="index"
          >
            {{ item.playTypeName }}
          </div>
        </div>
        <div class="popup-content">
          <Handicap @update-template="fetchGameTemplateData"/>
          <div class="tips">单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万</div>
          <component ref="gameRef" :is="getGameComponentTag" :renderData="getCurrentGameData" />
        </div>
      </div>
      <investPopup @betNow="betNow($refs)" @updateInvestList="clearInvestList($refs)" />
    </div>
  </div>
</template>

<script>
import CommonGame from './game/lhc-common-game.vue'
import investPopup from '@/components/invest-popup.vue'
import { mapState, mapActions, mapGetters } from 'pinia'
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { useLhcStore } from '@/stores/tpl-lhc'
import SubGame from '@/components/game/tpl-lhc/game/lhc-sub-game.vue'
import Handicap from '@/components/Handicap.vue'

export default {
  components: { investPopup, SubGame, CommonGame, Handicap },
  mounted() {
    this.init()
  },

  computed: {
    ...mapState(useLhcStore, {
      currentGameType: (state) => state.currentGameType,
      gameTemplateData: (state) => state.gameTemplateData,
    }),
    ...mapState(useGameStore, {
      currentGame: (state) => state.currentGame,
      drawingStatus: (state) => state.drawingStatus,
    }),
    ...mapGetters(useGameStore, ['allGame']),
    ...mapGetters(useLhcStore, ['getCurrentGameData', 'getGameComponentTag', 'getPlayTypeCodeList']),
  },

  methods: {
    ...mapActions(useLhcStore, ['init', 'setCurrentGameType', 'betNow', 'clearInvestList', 'fetchGameTemplateData']),

    numberToChinese,
  },
}
</script>

<style scoped lang="less">
@import url('lhc.less');
.container {
  background: #171a26;
  .popup {
    position: relative;
    height: 100%;
  }

  .pop {
    height: calc(100% - 110px);
  }

  .popup-content {
    height: 100%;
  }

  :deep(.play-box) {
    height: calc(100% - 40px);
  }

  :deep(.play-odds) {
    max-height: calc(100% - 50px);
  }
}
.tips {
  margin-bottom: 7px;
  font-size: 12px;
  color: rgba(246, 68, 54, 1);
}
.popup-lf {
  max-height: 7.2rem !important;
  overflow-y: auto;
  scroll-behavior: smooth;
}
</style>
